@extends('admin.layouts.content')
@section('content')

    <div class="layuimini-container">
        <div class="layuimini-main">
            <div>
                <table id="munu-table"  class="layui-table" lay-filter="munu-table"></table>
                <script type="text/html" id="table-top-bar" lay-filter="table-top-bar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add">新增菜单</button>
                        <button class="layui-btn layui-btn-sm" id="btn-expand" lay-event="expand">全部展开</button>
                        <button class="layui-btn layui-btn-sm" id="btn-fold" lay-event="fold">全部折叠</button>
                    </div>
                </script>
            </div>
        </div>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
@endsection

@section('script')
<script>
    layui.use(['table', 'treetable'], function () {
        $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
// 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                id: 'testReload',
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#munu-table',
                url: '{{url('admin/api/menu/table_list')}}',
                page: false,
                cols: [[
                    {type: 'id', width: 60, field: 'id', title: '编号'},
                    {field: 'name', minWidth: 200, title: '权限名称'},
                    {
                        field: 'icon', title: '显示图标', width: 100, templet: function (obj) {
                            return '<i class="layui-icon ' + obj.icon + '"></i>';
                        }
                    },
                    {
                        field: 'is_menu', title: '类型', width: 100, templet: function (obj) {
                            if (obj.is_menu == 1) {
                                return '<span class="layui-badge">菜单</span>';
                            }
                            return '<span class="layui-badge layui-bg-green">功能</span>';
                        }
                    },
                    {field: 'route', title: '功能链接'},
                    {field: 'sort', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'is_disabled', title: '显示状态', width: 100, templet: function (obj) {
                            if (obj.is_disabled == 1) {
                                return '<span class="layui-badge">已禁用</span>';
                            }
                            return '<span class="layui-badge layui-bg-green">启用</span>';
                        }
                    },
                    {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                },
                toolbar: "#table-top-bar"
            });
        }
        renderTable();
        table.on('toolbar(munu-table)', function (obj) {
            switch(obj.event) {
                case 'add':
                    layer.open({
                        'type': 2,
                        'title': '添加功能菜单',
                        'area': ['600px', '600px'],
                        'content': '{{url('admin/menu/create')}}',
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                            renderTable();
                            // layui.table.reload('munu-table'); //重载表格
                        }
                    });


                    //eventMap.add();
                    break;
                case 'expand':
                    treetable.expandAll('#munu-table');
                    break;
                case 'fold':
                    treetable.foldAll('#munu-table');
                    break;
            }
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        'type': 2,
                        'title': '编辑菜单',
                        'area': ['700px', '600px'],
                        'content' : '{{url('admin/menu/edit')}}/' + obj.data.id,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            // active.reload();

                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                            renderTable();

                            // layui.table.reload('munu-table'); //重载表格
                        }
                    });
                    //eventMap.edit(obj);
                    break;
                case 'delete':

                    layer.confirm('您确定要删除菜单吗', {
                        btn: ['确认', '取消']
                    }, function(index, layero){
                        $.ajax({
                            url : '{{url('admin/api/menu/delete')}}',
                            type: "POST",
                            data : {
                                id : obj.data.id,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType : 'json',
                            success : function(result) {
                                if(result.error == 0) {
                                    layer.msg("已删除");
                                    renderTable();
                                }
                                else {
                                    layer.alert(result.msg, {icon: 2});
                                }
                            }
                        });
                    }, function(index){
                        layer.closeAll();
                    });


                    //eventMap.delete(obj);
                    break;
            }
        });
    });

    var eventMap = {

        add: function(obj) {
            layer.open({
                'type': 2,
                'title': '添加功能菜单',
                'area': ['600px', '600px'],
                'content': '{{url('admin/menu/create')}}',
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                    submit.click();

                   // layui.table.reload('munu-table'); //重载表格
                }
            });
        },
        edit: function(obj) {
            layer.open({
                'type': 2,
                'title': '编辑菜单',
                'area': ['700px', '600px'],
                'content' : '{{url('admin/menu/edit')}}/' + obj.data.id,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                   // active.reload();

                     var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                     submit.click();
                   // layui.table.reload('munu-table'); //重载表格
                }
            });
        },
        delete: function(obj) {
            layer.confirm('您确定要删除菜单吗', {
                btn: ['确认', '取消']
            }, function(index, layero){
                $.ajax({
                    url : '{{url('admin/api/menu/delete')}}',
                    type: "POST",
                    data : {
                        id : obj.data.id,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType : 'json',
                    success : function(result) {
                        if(result.error == 0) {
                            layer.msg("已删除");
                            active.reload();
                        }
                        else {
                            layer.alert(result.msg, {icon: 2});
                        }
                    }
                });
            }, function(index){
                layer.closeAll();
            });
        }
    };
</script>
@endsection
